<template>
  <header>
    <nav class="container">
      <div class="branding">
        <router-link class="header" :to="{ name: 'Home' }"
          >FireBlogs</router-link
        >
      </div>
      <div class="nav-links"  v-show='!mobile'>
        <ul>
          <router-link class="link" to="#">主页</router-link>
          <router-link class="link" to="#">博客</router-link>
          <router-link class="link" to="#">发文章</router-link>
          <router-link class="link" to="#">注册/登录</router-link>
        </ul>
      </div>
    </nav>
    <menuIcon class="menu-icon" @click = 'toggleMobileNav' v-show='mobile'/>
    <!-- 手机端的导航栏 -->
    <transition name="mobile-nav" >
      <ul class="mobile-nav" v-show='mobileNav'>
        <router-link class="link" to="#">主页</router-link>
          <router-link class="link" to="#">博客</router-link>
          <router-link class="link" to="#">发文章</router-link>
          <router-link class="link" to="#">注册/登录</router-link>
      </ul>
    </transition>
  </header>
</template>

<script>
import menuIcon from "../assets/Icons/bars-regular.svg";
export default {
  name: "navigation",
  components: {
    menuIcon,
  },
  data() {
    return {
      mobile: null,
      mobileNav: null,
      windowWidth: null,
    };
  },
  created() {
    // 当窗口变化时，检查屏幕尺寸
    window.addEventListener("resize", this.checkScreen);
    // 首次加载时，也检测屏幕尺寸
    this.checkScreen();
  },
  methods: {
    //检测屏幕尺寸
    checkScreen() {
      this.windowWidth = window.innerWidth;
      if (this.windowWidth <= 750) {
        return (this.mobile = true);
      }
      this.mobile = false;
      //关闭手机导航栏
      this.mobileNav = false;
    },
    //当点击手机端的导航icon，toggle手机端的菜单
    toggleMobileNav() {
      this.mobileNav = !this.mobileNav;
    },
  },
};
</script>

<style scoped>
header {
  background-color: #fff;
  padding: 0 25px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 99;
}

header .link {
  font-weight: 500;
  padding: 0 8px;
  transition: color 0.3s ease;
}

header .link:hover {
  color: #1eb8b8;
}

nav {
  display: flex;
  padding: 25px 0;
}

nav .branding {
  display: flex;
  align-items: center;
}

nav .branding .header {
  font-weight: 600;
  font-size: 24px;
  text-decoration: none;
  color: black;
}

nav .nav-links {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

nav .nav-links ul {
  margin-right: 32px;
}

nav .nav-links ul .link {
  margin-right: 32px;
}
nav .nav-links ul .link:last-child {
  margin-right: 0;
}

.menu-icon {
  cursor: pointer;
  position: absolute;
  top: 28px;
  right: 25px;
  height: 25px;
  width: auto;
}

.mobile-nav {
  padding: 20px;
  width: 70%;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100%;
  background-color: #303030;
  top: 0;
  left: 0;
}

.mobile-nav .link {
  padding: 15px 0px;
  color: white;
}

.mobile-nav-enter-active,
.mobile-nav-leave-active
{
    transition:all 1s ease-in-out;
}

.mobile-nav-enter{
    transform: translateX(-250px);
}

.mobile-nav-enter-to{
    transform: translateX(0);
}

.mobile-nav-leave-to{
    transform: translateX(-250px);
}

</style>